<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
      .container {
        display: flex;
      }

      /* .container:hover #large-box{
        display: block;
      } */

      #base-box {
        position: relative;
        width: 450px;
        height: 450px;
        border: 1px solid #aaa;
        background: url('./image/my-computed-small.jpg');
      }

      .move-model {
        width: 300px;
        height: 300px;
        background: #FEDE4F;
        opacity: 0.5;
        cursor: move;
        position: absolute;
        top: 0;
        left: 0;
      }

      #large-box {
        width: 540px;
        height: 540px;
        border: 1px solid #aaa;
        background-image: url('./image/my-compute-large.jpg');
        background-repeat: no-repeat;
        background-position: 0 0;
        display: none;
      }

      .all-model {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
      }
    </style>
</head>
<body>
    <div class="container">
      <div id="base-box">
        <div class="move-model"></div>

        <div class="all-model"></div>
      </div>

      <div id="large-box"></div>
    </div>

    <script>
      var baseBox = document.getElementById('base-box')
      var largeBox = document.getElementById('large-box')
      var allModel = document.getElementsByClassName('all-model')[0]
      var moveModel = document.getElementsByClassName('move-model')[0]

      allModel.onmousemove = function (e) {
        console.log(e.target)
        var offsetX = e.offsetX
        var offsetY = e.offsetY
        var moveModelWidth = moveModel.clientWidth
        var moveModelHeight = moveModel.clientHeight
        var posLeft = offsetX - (moveModelWidth / 2)
        var posTop = offsetY - (moveModelHeight / 2)

        if (offsetX <= 150) {
          posLeft = 0
        }

        if (offsetX >= 300) {
          posLeft = 150
        }

        if (offsetY <= 150) {
          posTop = 0
        }

        if (offsetY >= 300) {
          posTop = 150
        }

        moveModel.style.top = posTop + 'px'
        moveModel.style.left = posLeft + 'px'

        largeBox.style.backgroundPosition = `${-(posLeft * 1.7)}px ${-(posTop * 1.7)}px`
        // largeBox.style.backgroundPosition = -posLeft + 'px' + ' ' + -posTop + 'px'
      }

      baseBox.onmouseover = function () {
        largeBox.style.display = 'block'
      }

      baseBox.onmouseleave = function () {
        largeBox.style.display = 'none'
      }
    </script>
</body>
</html>